<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>canvas画板</title>
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="./index.css">
</head>

<body>
	<div class="container">
		<canvas width="100%" height="550"></canvas>
	</div>
	<div class="opt">
		<!-- 笔画大小 -->
		<select>
			<option value="1">1px</option>
			<option value="5">5px</option>
			<option value="10">10px</option>
			<option value="15">15px</option>
			<option value="20">20px</option>
			<option value="30">30px</option>
		</select>
		<!-- 颜色 -->
		<input type="color">
		<!-- 矩形 -->
		<input id="rect" type="button" value="矩形" style="padding:0 10px;">
		<!-- 上传图片 -->
		<input id="upload" type="button" value="上传图片并覆盖当前画板" style="padding:0 10px;">
		<!-- 擦除 -->
		<input id="ch" type="button" value="开始擦除" style="padding:0 10px;">
		<!-- 清空 -->
		<input id="clear" type="button" value="清空画板" style="padding:0 10px;">
		<!-- 下载 -->
		<input id="down" type="button" value="保存并下载" style="padding:0 10px;">
		<a download></a>
		<input id="file" type="file" name="file" hidden />
	</div>
	<script src="./index.js"></script>
</body>

</html>